<!--
 * @Description  : 无限滚动公告
 * @Author       : zhao
 * @Date         : 2022-08-05 10:11:37
 * @LastEditors  : zhao
 * @LastEditTime : 2023-02-24 15:36:10
-->
<!--  -->
<template>
    <div style="position: absolute">
        <ul style="min-height: 27px">
            <div class="img">
                <img src="../../assets/roll.png" alt="" />
            </div>
            <div style="overflow: hidden; width: 100%">
                <div class="msg-box" ref="msgBox" :style="{ left: left + 'px' }">
                    <li
                        class="msg ellipsis cursor"
                        @click="jump(i)"
                        ref="scrollMsg"
                        @mouseenter="mouseenter()"
                        @mouseleave="mouseleave()"
                        v-for="(i, index) in data"
                        :key="index + 'roll'"
                    >
                        {{ i.title }}
                    </li>
                </div>
            </div>
        </ul>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            msg: "",
            data: [],
            left: 0,
            timer: null,
        }
    },

    components: {},

    computed: {},

    mounted() {
        this.getdata()
    },

    methods: {
        handleScrollMsg() {
            this.$nextTick((e) => {
                let speed = 20 //字体的整体滚动速度
                let box = this.$refs.msgBox
                let msg = this.$refs.scrollMsg
                msg[0].style.left = "20px"
                let scroll = () => {
                    if (this.left <= -msg[0].offsetWidth) {
                        this.data.push(this.data[0])
                        this.data.shift()
                        this.left = 0
                    } else {
                        this.left = this.left - 1
                    }
                }

                this.timer = setInterval(scroll, speed)
            })
        },
        async getdata() {
            let Archivedata = { pageSize: 5, pageIndex: 1 }
            const { data, code } = await this.$store.dispatch("ArchiveInfo/getNoticeList", Archivedata)

            if (code == 200) {
                this.data = data
                this.handleScrollMsg()
            }
            if (code != 200) this.data = [{ title: "暂无数据" }]
        },
        roll() {},
        mouseenter() {
            clearInterval(this.timer)
        },
        mouseleave() {
            let speed = 20 //字体的整体滚动速度
            let box = this.$refs.msgBox
            let msg = this.$refs.scrollMsg
            msg[0].style.left = "20px"
            let scroll = () => {
                if (this.left <= -msg[0].offsetWidth) {
                    this.data.push(this.data[0])
                    this.data.shift()
                    this.left = 0
                } else {
                    this.left = this.left - 1
                }
            }

            this.timer = setInterval(scroll, speed)
        },
        jump(i) {
            sessionStorage.setItem("infoPublic", JSON.stringify(i))
            this.$router.push("/InfoPublic/details")
        },
    },
    beforeDestroy() {
        if (this.timer) {
            //如果定时器还在运行 或者直接关闭，不用判断
            clearInterval(this.timer) //关闭
        }
    },
}
</script>
<style lang='scss' scoped>
// $background-color: rgba(236, 245, 255, 0.7);
$background-color: #fff;
$color: black;

ul {
    // width: calc(100vw - 6.1rem);
    width: calc(100vw);
    display: flex;
    background-color: $background-color;
    align-items: center;
    color: $color;
    border-radius: 4px;
    padding: 0 10px;
}

.msg-box {
    width: 100%;
    display: flex;
    position: relative;
}

.img {
    height: 100%;
    width: 30px;

    img {
        width: 20px;
        height: 20px;
        font-size: 14px;
    }
}

.msg {
    min-width: 50%;
    white-space: nowrap;
    padding: 10px;
    // position: relative;
    text-align: right;
}
</style>